<template>
  <el-row :gutter="20">
  
    <el-col :span="6">
      <div class="grid-content bg-purple">
          <span style="">上传项目2个</span>
      </div>
  </el-col>
  
    <el-col :span="6">
      <div class="grid-content bg-purple">
          <span style="">涉及上游5个</span>
      </div>
  </el-col>
  
    <el-col :span="6">
      <div class="grid-content bg-purple">
          <span style="">参与项目3个</span>
      </div>
  </el-col>
  
    <el-col :span="6">
      <div class="grid-content bg-purple">
          <span style="">威胁项目1个</span>
      </div>
  </el-col>
  
  </el-row>
  

  
  <el-row :gutter="20">
    <div class="block">
      <el-image :src="src" style="margin-left: 10px;"></el-image>
    </div>
  </el-row>
  
  
  <div  style="display: flex;">
    上传柱状图：
    <div  ref="barChart" style="width: 400px; height: 400px;flex: 1;"></div>
    语言饼图：
    <div ref="pieChart" style="width: 400px; height: 400px;flex: 1;"></div>
  </div>
  
  </template>
  
  <script setup>
  import { onMounted, ref } from 'vue';
  import * as echarts from 'echarts';
   
  const pieChart = ref(null);
  const barChart = ref(null);
   
  onMounted(() => {
    const pieOption = {
      series: [
        {
          name: '语言',
          type: 'pie',
          radius: '80%',
          data: [
            { value: 235, name: 'C' },
            { value: 274, name: 'Java' },
            { value: 310, name: 'python' },
            { value: 335, name: 'javascript' },
          ],
        },
      ],
    };
   
    const barOption = {
      xAxis: {
        type: 'category',
        data: ['', '', '', '今日上传'],
      },
      yAxis: {
        type: 'value',
      },
      series: [
        {
          data: [0, 1, 0, 2],
          type: 'bar',
        },
      ],
    };
   
    const pieChartInstance = echarts.init(pieChart.value);
    const barChartInstance = echarts.init(barChart.value);
    pieChartInstance.setOption(pieOption);
    barChartInstance.setOption(barOption);
  });
  </script>
  
  <script >
  
    export default {
      data() {
        return {
          tableData: [{
            date: '系统名称',
            name: '图书管理系统',
            address: '......'
          }, {
            date: '系统技术',
            name: 'Python+Flask+Vue+Mysql',
            address: '......'
          }, {
            date: '开发环境',
            name: 'Vscode+Pycharm',
            address: '......'
          }],
          // src: 'https://pic.imgdb.cn/item/65d6fbb99f345e8d037879c3.png'
        }
      },
    }
  </script>
  
  <style  scoped>
      span {
          color: white;
          font-weight: 1000;
          font-size: 26px;
  
      }
    .el-row {
      margin-bottom: 20px;
      &:last-child {
        margin-bottom: 0;
      }
    }
    .el-col {
      border-radius: 10px;
      text-align: center;
      line-height:120px;
  
  
    }
    .bg-purple-dark {
      background: #99a9bf;
    }
    .bg-purple {
      background: #d3dce6;
    }
    .bg-purple-light {
      background: #e5e9f2;
    }
    .grid-content {
      border-radius: 4px;
      min-height: 150px;
    }
    .row-bg {
      padding: 10px 0;
      background-color: #f9fafc;
    }
  </style>